<template>
	<view>
		<view  class="container">
			<carHeader :title="'订单详情'"></carHeader>
		</view>
		<view class="top">
			<view class="top1">
				<text>支付成功，请您前往指定门店消费</text>
			</view>
			<view class="top2">
				<image src="../../static/车联网服务-01专业洗车-05洗车-订单详情_slices/商家@2x.png" mode=""></image>
				<span class="top3">伟业汽车美容店（人民路店）</span>
				<p class="top4">山阳区人民中路33号</p>
				<image src="../../static/车联网服务-01专业洗车-05洗车-订单详情_slices/plane@2x.png" mode="" class="image1"></image>
			</view>	
		</view>
		<view class="content">
			<text class="msg">订单详情</text>
			<view class="xian1"></view>
			<view class="wash">
				<text class="wash1">车辆清洗</text>
				<text class="wash_money">￥39.90</text>
			</view>
			<view class="fujia">
				<text class="fujia1">车辆附加费用</text>
				<text class="fujia_money">0</text>
			</view>
			<view class="xian2"></view>
			<view class="price">
				<text class="price1">原价</text>
				<text class="price_money">￥59.90</text>
			</view>
			<view class="shop">
				<text class="shop1">店家优惠</text>
				<text class="shop_money">-￥20.00</text>
			</view>
			<view class="xian2"></view>
			<view class="quan">
				<text class="quan1">优惠券</text>
				<text class="quan_money">-￥10.00</text>
			</view>
			<view class="xian1"></view>
			<view class="zhifu">
				<text class="zhifu1">支付金额</text>
				<text class="zhifu_money">￥29.90</text>
			</view>
		</view>
	<view class="bottom">
		<view class="bottom1">
			<text class="msg">订单信息</text>
			<view class="xian1"></view>
		</view>
		<view class="order">
			<text class="order1">订单号:</text>
			<text class="order_number">121212112487878</text>
		</view>
		<view class="time">
			<text class="time1">下单时间:</text>
			<text class="time_number">2020.01.08 17.40</text>
		</view>
		<view class="car">
			<text class="car1">车辆:</text>
			<text class="car_number">奔驰FWE4/豫A98FHJ</text>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.container{
		// position: relative;
	
	}
.top{
	
	margin-top: -220rpx;
	color: white;
	margin-left: 55rpx;
	// background-color: #21ca59;
	.top1{
		font-size: 22rpx;
		// font-weight: 300;
	}
	.top2{
		margin-top: 25rpx;
		.top3{
			position: relative;
			top: -10rpx;
			left: 10rpx;
		}
		.top4{
			position: relative;
			left: 45rpx;
			top: -10rpx;
			font-size: 22rpx;
			// font-weight: 300;
		}
		.image1{
			position: relative;
			left: 610rpx;
			top: -55rpx;
		}
	}
	image{
		width: 30rpx;
		height: 28rpx;
		top: -5rpx;
	}
}
.content{
		height: 540rpx;
		// width: 100%;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: -30rpx;
		border-radius: 20rpx;
		background-color: white;
		.msg{
			position: relative;
			top: 20rpx;
			left: 20rpx;
		}
		.xian1{
			position: relative;
			height: 6rpx;
			background-color:#eeeeee;
			margin-top: 40rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;	
		}
		.xian2{
			position: relative;
			height: 2rpx;
			background-color:#eeeeee;
			margin-top: 40rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;	
		}
		.wash{
			display: flex;
			margin-right: 20rpx;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			.wash1{
				position: relative;
				left: 20rpx;
				top: 20rpx;
				font-size: 25rpx;
			}
			.wash_money{
				position: relative;
				// left: 400rpx;
				top:20rpx;
				font-size: 25rpx;	
			}
		}
		.fujia{
			display: flex;
			margin-right: 20rpx;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			.fujia1{
				position: relative;
				left: 20rpx;
				top: 20rpx;
				font-size: 25rpx;
			}
			.fujia_money{
				position: relative;
				// left: 400rpx;
				top:20rpx;
				font-size: 25rpx;	
			}
		}
		.price{
			display: flex;
			margin-right: 20rpx;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			.price1{
				position: relative;
				left: 20rpx;
				top: 20rpx;
				font-size: 25rpx;
			}
			.price_money{
				position: relative;
				// left: 400rpx;
				top:20rpx;
				font-size: 25rpx;	
			}
		}
		.shop{
			display: flex;
			margin-right: 20rpx;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			.shop1{
				position: relative;
				left: 20rpx;
				top: 20rpx;
				font-size: 25rpx;
			}
			.shop_money{
				position: relative;
				// left: 400rpx;
				top:20rpx;
				font-size: 25rpx;	
				color: red;
			}
		}
		.quan{
			display: flex;
			margin-right: 20rpx;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			.quan1{
				position: relative;
				left: 20rpx;
				top: 20rpx;
				font-size: 25rpx;
			}
			.quan_money{
				position: relative;
				// left: 400rpx;
				top:20rpx;
				font-size: 25rpx;	
				color: red;
			}
		}
		.zhifu{
			display: flex;
			margin-right: 20rpx;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			.zhifu1{
				position: relative;
				left: 20rpx;
				top: 30rpx;
				font-size: 27rpx;
			}
			.zhifu_money{
				position: relative;
				// left: 400rpx;
				top:30rpx;
				font-size: 30rpx;	
				color:#21ca59;
			}
		}
	}
	
	.bottom{
		margin: 20rpx;
		height: 280rpx;
		background-color: white;
		border-radius: 20rpx;
		.msg{
			position: relative;
			top: 20rpx;
			left: 20rpx;
		}
		.xian1{
			position: relative;
			height: 6rpx;
			background-color:#eeeeee;
			margin-top: 35rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			
		}
		.order{
			display: flex;
			margin-right: 20rpx;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			.order1{
				position: relative;
				left: 20rpx;
				top: 20rpx;
				font-size: 25rpx;
			}
			.order_number{
				position: relative;
				// left: 400rpx;
				top:20rpx;
				font-size: 25rpx;
				color: #aaaaaa;		
			}
		}
		.time{
			display: flex;
			margin-right: 20rpx;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			.time1{
				position: relative;
				left: 20rpx;
				top: 20rpx;
				font-size: 25rpx;
			}
			.time_number{
				position: relative;
				// left: 400rpx;
				top:20rpx;
				font-size: 25rpx;
				color: #aaaaaa;		
			}
		}
		.car{
			display: flex;
			margin-right: 20rpx;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			.car1{
				position: relative;
				left: 20rpx;
				top: 20rpx;
				font-size: 25rpx;
			}
			.car_number{
				position: relative;
				// left: 400rpx;
				top:20rpx;
				font-size: 25rpx;
				color: #aaaaaa;		
			}
		}
	}
</style>
